<template>
  <!-- 编辑配件 -->
  <a-modal :width="1000" title="设置配件" v-model:visible="showDetail" okText="保存" :mask-closable="false" @cancel="closedDialog" :on-before-ok="saveData">
    <div class="edit-product-plan-wrap">
      <div class="product-info-w">
        <div class="img-w">
          <ImgPopover :src="$extract(getPicList(detailInfo)[0], 'url')">
            <template #con>
              <a-image width="180" height="180" fit="contain" :src="$extract(getPicList(detailInfo)[0], 'url')" />
            </template>
          </ImgPopover>
        </div>
        <div class="product-info-con">
          <div class="flex">
            <div class="produc-base">
              <!-- <p>品名：{{ detailInfo.productName }}</p> -->
              <p>SKU：{{ $extract(detailInfo, 'product.productSku') }}</p>
              <!-- <p>SPU：{{ detailInfo.spu }}</p>
              <p>类目：{{ detailInfo.cateName }}</p>
              <p>规格：{{ getProductSpecs(detailInfo) }}</p>
              <p>备注：{{ detailInfo.productRemark }}</p> -->
            </div>
            <div class="produc-prop">
              <div class="custom-basic-info flex">
                <div class="label">定制类型：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.customType') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">材质：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.material') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">刻字内容：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.fontTxt') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">字体：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.fontFamily') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">电镀颜色：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.platinColor') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">戒指尺码：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.ringSize') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">石头：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.stone') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">链条：</div>
                <div class="value">{{ getfittingName(detailInfo) }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">字印：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.fontPrint') }}</div>
              </div>
              <div class="custom-basic-info flex">
                <div class="label">备注：</div>
                <div class="value">{{ $extract(detailInfo, 'customInfo.remark') }}</div>
              </div>
            </div>
          </div>
          <div class="remark-w">
            <a-textarea placeholder="在此输入生产注意事项" size="mini" style="height: 70px" v-model="detailInfo.remark" />
          </div>
        </div>
      </div>
      <div class="parets-w">
        <setProductParets ref="productParetsRef" :list="detailInfo.partsList" />
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { findProductionProcedurePage } from '@/api/purchaseApplication'
  import SetProductParets from './setProductParets.vue'
  import { cloneDeep } from 'lodash-es'
  import { parseJson, getStrVal } from '@/utils'
  import useBaseDataStore from '@/store/modules/base-data'

  onMounted(() => {
    useBaseData.getWareHouseList()
    getProductionProcedure()
    setDefaultData()
  })

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  const useBaseData = useBaseDataStore()
  const showDetail = ref(props.isShow)
  const detailInfo = ref<any>({})
  const productionProcedure = ref<Array<any>>([])
  const productParetsRef = ref()

  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
  // 获取生产工序模板列表
  async function getProductionProcedure() {
    const res: any = await findProductionProcedurePage({
      pageSize: 100,
      pageNum: 1,
    })
    productionProcedure.value = res?.data?.records || []
  }
  function setDefaultData() {
    detailInfo.value = cloneDeep(props.currentData)
    if (detailInfo.value.warehouseCode) {
      detailInfo.value.warehouseInfo = {
        warehouseCode: detailInfo.value.warehouseCode,
        warehouseName: detailInfo.value.warehouseName,
      }
    }
  }

  async function saveData() {
    let partsList = productParetsRef.value.getPartsList()
    let flag = false
    let nameFlag = false
    if (partsList?.length) {
      partsList.forEach((el: any) => {
        if (!el.partsName) {
          nameFlag = true
        }
        if (!el.partsAmt && !el.partsWeight) {
          flag = true
        }
      })
      if (nameFlag) {
        Message.error('配件名称不能为空！')
        return false
      }
      if (flag) {
        Message.error('配件数量和重量必须填写一个！')
        return false
      }
    }
    emit('success', {
      partsList: partsList,
      remark: detailInfo.value.remark,
    })
    closedDialog()
  }

  const getPicList = (item: any) => {
    return item.customInfo?.customPicList || []
  }

  const getfittingName = (data: any) => {
    let arr = data?.customInfo?.chainList || []
    return arr.map((e: any) => e.fittingName).join(',')
  }
  // 关闭
  function closedDialog() {
    showDetail.value = false
    emit('closed')
  }
</script>
<style lang="less"></style>
<style lang="less" scoped>
  .edit-product-plan-wrap {
    height: calc(84vh - 150px);
    overflow: auto;
    padding-bottom: 20px;
    .product-info-w {
      display: flex;
      .img-w {
        width: 200px;
        flex-shrink: 0;
        border: 1px solid #ddd;
        padding: 10px;
      }
      .product-info-con {
        flex: 1;
        border: 1px solid #ddd;
        border-left: none;
        .produc-base {
          border-right: 1px solid #ddd;
          padding: 10px;
          width: 240px;
          flex-shrink: 0;
        }
        .produc-prop {
          padding: 10px;
          flex: 1;
        }
        .remark-w {
          border-top: 1px solid #ddd;
          background-color: #f9f9f9;
        }
        .arco-textarea-wrapper {
          border: none;
          background-color: #f9f9f9;
        }
        .arco-textarea {
          border: none;
          background-color: #f9f9f9;
          resize: none;
        }
      }
    }
  }
</style>
